<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app">
		
	</div>
	<script type="text/javascript" src="./vue.min.js"></script>
	<script src="./node_modules/axios/dist/axios.js"></script>

	<script type="text/javascript">

		
		var App = {
			data(){
				return {
					res1:"",
					res2:''
				}
			},
			template:`
				<div>
					响应1：{{res1}}
					响应2：{{res2}}
					<button @click = 'sendAjax'>合并强求</button>
				</div>

			`,
			methods:{
				sendAjax(){
					// 请求1 get:  /
					// 请求 post : /add
					this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';

					var q1 = this.$axios.get('');
					var q2 = this.$axios.post('add','a=1');

					this.$axios.all([q1,q2])
					.then(this.$axios.spread((res1,res2)=>{
						// 全部成功了
						this.res1 = res1.data;
						this.res2 = res2.data;
					}))
					.catch(err=>{
						// 其一失败
						console.log(err);
					})


				}
			}

		};

		Vue.prototype.$axios = axios
		
		new Vue({
			el:'#app',
			template:`<App />`,
			components:{
				App
			}
		});
	</script>
	
</body>
</html>